<template>
  <div>
    <!--列表展示-->
    <el-table :data="logs" style="width: 100%">
      <el-table-column
          prop="id" label="id" width="50">
      </el-table-column>
      <el-table-column
          prop="username" label="用户" width="80">
      </el-table-column>
      <el-table-column
          prop="operation" label="操作" width="100">
      </el-table-column>
      <el-table-column
          prop="method" label="方法" width="400">
      </el-table-column>
      <el-table-column
          prop="params" label="请求方法的参数名称" width="230">
      </el-table-column>
      <el-table-column
          prop="ip" label="IP地址" width="150">
      </el-table-column>
      <el-table-column
          prop="createDate" label="时间">
      </el-table-column>
    </el-table>
    <!--分页工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="pageSize"
                     :total="total"
                     :current-page="currentPage"
                     style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      logs: [],
      total: 0, //总条数初始值
      currentPage: 1, //开始页
      pageSize:5, //每页展示条数
      filters: {
        keyword: ''
      },
    }
  },
  methods: {
    getLog() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.filters.keyword//高级查询关键字
      };
      this.$http.post("/log", para)//调用接口，数据源
          .then(result => {
            console.log(result);
            this.logs = result.data.rows//查询到的数据
            this.total = result.data.total;//总条数
          })
          .catch(result => {
            console.log(result);
          })
    },
    search() {//高级查询
      // 定位到第一页
      this.currentPage = 1;
      //调用查询刷新页面
      this.getLog();
    },
    handleCurrentChange(val) {//分页
      this.currentPage = val;
      this.getLog();
    },
  },
  mounted() {
    this.getLog()
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>